<template>
  <div class="myapp">
      <div class="acticle">
        <ul>
          <li v-for="(v,i) in arr" :key="i">
              <router-link :to="v.url" class="dd">
                <p>{{v.num}}</p>
                <p>{{v.text}}</p> 
              </router-link>
          </li>
        </ul>  
      </div>
      <div class="section">
          <div class="section-box" v-for="(v,i) in listarr" :key="i">
              <router-link to="/allorder/allclassify" class="all">
                <p class="tou"><span>{{v.order}}</span><span>{{v.lookall}}</span></p>
              </router-link>
              <ul>
                <li v-for="(v,i) in v.item" :key="i">
                    <router-link :to="v.url" class="did">
                      <img :src="v.img" alt="">
                      <p>{{v.hint}}</p>   
                    </router-link>
                </li>
              </ul>
          </div>
      </div>
      <div class="figure">
          <div class="figure-box">
              <ul>
                <li v-for="(v,i) in figarr" :key="i">
                    <router-link to="">
                      <img :src="v.img" alt="">
                      <p>{{v.figtex}}</p>   
                    </router-link>
                </li>
              </ul>
          </div>
      </div>
      <div class="nav">
           <div class="nav-box">
              <ul>
                <li v-for="(v,i) in navarr" :key="i">
                    <router-link :to=v.url class="sh">
                      <img :src="v.img" alt="">
                      <p>{{v.navtex}}</p>   
                    </router-link>
                </li>
              </ul>
          </div>
      </div>
      <div class="cctv">
          <div class="cctvbox">
              <router-link to="">
                  <img src="image/Mine/jdd.png" alt="">
              </router-link>
          </div>
      </div>
      <div class="oftenbuy">
          <div class="buy-box">
              <p class="title">猜你喜欢 · <span>EXPLORE</span></p>
              <ul>
                <li v-for="(v,i) in oftenbuy" :key="i">
                    <router-link to="">
                      <img :src="v.img" alt="" class="big-img">
                      <h3>{{v.bytitle|oftenbuy}}</h3>
                      <span class="lei">{{v.type}}</span>
                      <p>
                          <span>￥ <i>{{v.price}}</i><b>/盒</b></span>
                          <span> <img src="image/Mine/bgw.png" alt=""> </span>
                      </p>
                    </router-link>
                </li>
              </ul>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        arr:Array,
        listarr:Array,
        figarr:Array,
        navarr:Array,
        oftenbuy:Array
    },
    filters:{
        oftenbuy(val){
            if(val.length>=11){
                return val.substr(0,10)+"..."
            }else{
                return val
            }
        }
    }
}
</script>

<style scoped>
.myapp{
    background-color: #f2f2f2;
}
.acticle{
    padding-top: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.acticle ul{
    background-color: #ffffff;
    width: 93%;
    height: 0.62rem;
    display: flex;
    border-radius: 0.08rem;
    justify-content: space-around;
}
.acticle ul li{
    text-align: center;
    height: 100%;
    width: 33.33%;
}
.acticle ul li .dd{
    padding-top: 0.15rem;
    display: inline-block;
    height: 100%;
    width: 100%;
}
.acticle ul li .dd p:nth-child(2){
    font-size: 0.13rem;
    margin-top: 0.02rem;
    color: #646464;
}
.acticle ul li .dd p:nth-child(1){
    font-size: 0.15rem;
    color: #000000;
    font-weight: bold;
}
.section{
    margin-top: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.section-box{
    border-radius: 0.08rem;
    width: 93%;
    height: 1.10rem;
    background-color: #ffffff;
}
.section-box .all .tou{
    margin-top: 0.07rem;
    padding: 0 0.18rem 0 0.12rem;
    display: flex;
    justify-content: space-between;
}
.section-box .all p span:nth-child(1){
    font-size: 0.14rem;
    color: #373737;
    font-weight: bold;
}
.section-box .all p span:nth-child(2){
    font-size: 0.12rem;
    color: #959595;
}
.section-box ul{
    height: 0.915rem;
    display: flex;
    justify-content: space-around;
}
.section-box ul li{
    width: 20%;
}
.section-box ul li .did img{
    width: 0.35rem;
    height: 0.35rem;
}
.section-box ul li .did{
    width: 100%;
    height: 93%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section-box ul li .did p{
    margin-top: 0.08rem;
    font-size: 0.13rem;
    color: #626262;
} 
.figure{
    margin-top: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.figure .figure-box{
    border-radius: 0.08rem;
    width: 93%;
    height: 1.05rem;
    background-color: #ffffff;
}
.figure .figure-box ul{
    display: flex;
    height: 1.05rem;
    align-items: center;
    justify-content: space-around;
}
.figure .figure-box ul li{
    width: 25%;
}
.figure .figure-box ul li .router-link-active{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.figure .figure-box ul li .router-link-active img{
   width: 0.43rem;
   height: 0.5rem;   
}
.figure .figure-box ul li .router-link-active p{
   margin-top: 0.05rem; 
   color: #646464;
}
.nav{
    margin-top: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.nav .nav-box{
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0.08rem;
    width: 93%;
    height: 1rem;
    background-color: #ffffff;
}

.nav .nav-box::-webkit-scrollbar{
    height: 0;
}
/* .nav .nav-box::-webkit-scrollbar-track-piece{
    background-color:#e6f7fe;
}	
.nav .nav-box::-webkit-scrollbar-thumb{
    background-color:#0dadf9;
    border: 0.1rem solid #4fa6d1;
    border-radius: 2rem;
} */
.nav .nav-box ul{
    display: flex;
    width: 140%;
    height: 1rem;
    align-items: center;
    justify-content: space-around;
}
.nav .nav-box ul li{
    width: 20%;
}
.nav .nav-box ul li .sh{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.nav .nav-box ul li .sh img{
   width: 0.35rem;
   height: 0.35rem;
}
.nav .nav-box ul li .sh p{
   margin-top: 0.07rem; 
   color: #646464;
}
.cctv{
    width: 100%;
    margin-top: 0.08rem;
    display: flex;
    justify-content: center;
}
.cctvbox{
    width: 93%;
    height: 0.7rem;
    border-radius: 0.08rem;
}
.cctvbox .router-link-active{
    width: 100%;
    height: 100%;
    display: inline-block;
}
.cctvbox .router-link-active img{
    width: 100%;
    height: 100%;
}
.oftenbuy{
    margin-top: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.oftenbuy .buy-box{
    width: 93%;
}
.oftenbuy .buy-box p:nth-child(1){
    margin-top: 0.08rem;
    text-align: center;
}
.oftenbuy .buy-box p:nth-child(1) span{
    color: #3599d4;
}
.oftenbuy .buy-box ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.oftenbuy .buy-box ul li{
    border-radius: 0.08rem;
    margin-top: 0.08rem;
    width: 48.50%;
    background-color: #ffffff;
}
.oftenbuy .buy-box ul li .router-link-active{
    width: 100%;
    height: 100%;
    display: inline-block;
}
.oftenbuy .buy-box ul li .router-link-active .big-img{
    width: 100%;
    margin: 0.1rem 0;
}
.oftenbuy .buy-box ul li .router-link-active h3{
    margin-left: 0.07rem;
    font-weight: normal;
    color: #343434;
}
.oftenbuy .buy-box ul li .router-link-active .lei{
    margin-left: 0.07rem;
    color: #979797;
}
.oftenbuy .buy-box ul li .router-link-active p{
    margin: 0.1rem 0.07rem 0.08rem;
    display: flex;
    justify-content: space-between;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(1){
    color: #e44e35;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(1) i{
    font-size: 0.18rem;
    font-style: normal;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(1) b{
    font-size: 0.11rem;
    font-weight: normal;
    color: #cdcdcd;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(2){
    background-color: #0caff4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.25rem;
    height: 0.25rem;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(2) img{
    width: 0.2rem;
    height: 0.2rem;
}
</style>